<ng-template [ngTemplateOutlet]="templateTop" [ngTemplateOutletContext]="this"></ng-template>
<p *ngIf="!hasConf">
    Please <button mat-button color="primary" class="btn btn-link" type="button" (click)="goConf()">Click here</button> to set up configuration first.
</p>
<mat-card class="form-card">
  <!-- <div *ngIf="conf.title" class="mat-toolbar mat-card-toolbar" fxLayoutAlign="space-between center">
    {{ conf.title | translate }}  
  </div> -->
    <div class="mat-content">

        <mat-spinner 
            [diameter]='40' 
            id="entity-table-spinner"
            *ngIf="showSpinner" #entityspinner>
          </mat-spinner> 
        
        <form (ngSubmit)="onSubmit($event)" [formGroup]="formGroup" class="form-wrap" #entityForm="ngForm">
                <div class="fieldset-container fieldset-display-default" *ngIf="fieldSets">
            <ng-container *ngFor="let fieldSet of fieldSets; let i = index">
              <div [ngClass]="[fieldSet.class ? fieldSet.class : '', isFieldsetAvailabel(fieldSet) ? '' : 'empty-fieldset']" class="fieldset divider-{{fieldSet.divider}}"
                  fxLayout="row wrap" fxLayoutAlign="start start" fxFlex="100%" fxFlex.gt-xs="calc({{fieldSets[i].width}} - 16px)">
                <mat-divider *ngIf="fieldSets[i].divider && i > 0"></mat-divider>
                  <h4 *ngIf="fieldSet.label && isFieldsetAvailabel(fieldSet)" class="fieldset-label">{{fieldSet.name | translate}}</h4>
                  <div *ngFor="let field of fieldSet.config; let ii = index" fxFlex="100%" fxFlex.gt-xs="calc({{field.width}} - 16px)"
                    [ngClass]="field.class == 'inline' ? 'form-inline' : 'form-line'" id="{{fieldSet.name}}-{{ii}}">
                    <div id="form_field_{{field.name}}" dynamicField [config]="field" [group]="formGroup" [fieldShow]="isShow(field.name) ? 'show' :'hide'"></div>
                  </div>
              </div>
            </ng-container>
              <mat-card-actions class="buttons">
                <button id="save_button" class="btn btn-block btn-warning mat-primary" type="submit" mat-button color="primary" [disabled]="!entityForm.form.valid || !conf.save_button_enabled" 
                  [ix-auto]=""
                  ix-auto-type="button"
                  ix-auto-identifier="{{saveSubmitText | uppercase}}"
                  >{{saveSubmitText | translate}}</button>
                <button id="goback_button" *ngIf="conf.route_success" class="btn  btn-block btn-lg" type="button" (click)="goBack()" mat-button color="default"
                  [ix-auto]=""
                  ix-auto-type="button"
                  ix-auto-identifier="CANCEL"
                  >{{"Cancel" | translate}}</button>
                <!-- </div> -->
                <!-- <div class="btn-group btn-group-justified"> -->
                <span *ngFor="let custBtn of conf.custActions">
                  <button id="cust_button_{{custBtn.name}}" color="default"  mat-button class="mat-basic" *ngIf="!conf.isCustActionVisible || conf.isCustActionVisible(custBtn.id)" [disabled]="conf.isCustActionDisabled !== undefined ? conf.isCustActionDisabled(custBtn.id) : custBtn.disabled" type="button" (click)="custBtn['function']()"
                    [ix-auto]=""
                    ix-auto-type="button"
                    ix-auto-identifier="{{custBtn.name | uppercase}}"
                    >{{custBtn.name | translate}}</button>
                </span>
                <button mat-button *ngIf="conf.route_delete" class="btn btn-block btn-danger" type="button" (click)="gotoDelete()"
                  [ix-auto]=""
                  ix-auto-type="button"
                  ix-auto-identifier="DELETE"
                  >{{"Delete" | translate}}</button>
                <!-- </div> -->
                <div id="success-msg-wrapper">
                  <div *ngIf="success && entityForm.form.dirty === false" type="success" id="successfully_updated">{{successMessage | translate}}</div>
                </div>
            </mat-card-actions>
            </div>
            <!-- <div class="btn-group btn-group-justified"> -->
        </form>
        <span *ngIf="conf.form_message" id="form_message" class="form-message" [ngClass]="conf.form_message.type" [innerHTML]="conf.form_message.content | translate"></span>
        <mat-error *ngIf="error" type="danger" id="error_message"><div [innerHTML]="error"></div></mat-error>
    </div>
</mat-card>

